<script setup lang="ts">
import { useRouter } from 'vue-router'
import { computed, onActivated, onMounted, reactive, ref, toRefs } from 'vue'
import { getImgPath, getImage, toast } from '@/util/bussinessTool'
import { isNotEmpty } from '@/util/localTool'
import { store } from '@/stores/allStores'
import { isChannelMeiYeChannel } from '@/api/meiye'
import { isWorkerMeiYeWorker } from '@/api/workerClient'
import { myUserApi } from '@/api/system'
let isChannel = ref(false)
let isWorker = ref(false)
let num = 0
const list = [{
  icon: '../assets/static/my/channel.png',
  text: '申请分销',
  showFnc: function () { return isChannel.value ? false : true },
},
{
  icon: '../assets/static/my/channel.png',
  text: '分销中心',
  showFnc: function () { return isChannel.value ? true : false },
  //url: '/pages/channel/my',
}, {
  icon: '../assets/static/my/worker.png',
  text: '技师招募',
  showFnc: function () { return isWorker.value ? false : true },
},
{
  icon: '../assets/static/my/worker.png',
  text: '我是技师',
  showFnc: function () { return isWorker.value ? true : false },
}, {
  icon: '../assets/static/my/kefu.png',
  text: '联系客服',
},
{
  icon: '../assets/static/my/suggest.png',
  text: '意见反馈',
  //url: '/pages/my/suggest'
},
{
  icon: '../assets/static/my/about.png',
  text: '关于我们',
  //url: '/pages/my/about'
}]
type userDetailType = {
  data: {
    couponNum?: number | string,
    collectionNum?: number | string,
    money?: number,
    avatar?: string,
    name?: string
  }
}
let userDetail: userDetailType = reactive({ data: {} })
let myList = ref()
const avatar = ref('../assets/static/my/avatar.png')
onActivated(() => {
  loadData()
})

async function loadData() {
  if (isNotEmpty(store.user.token)) {
    myUserApi().then((res: { data: any }) => {
      userDetail.data = res.data
      store.user.user = res.data
    })
  }
  let channelRes = await isChannelMeiYeChannel()
  let workerRes = await isWorkerMeiYeWorker()
  isWorker.value = workerRes.data ? workerRes.data : false
  isChannel.value = channelRes.data ? channelRes.data : false
  setList()
}
function setList() {
  myList.value = []
  list.forEach(item => {
    let exist = Object.keys(item).find(key => {
      return key === 'showFnc'
    })
    if (exist) {
      if (item.showFnc && item.showFnc()) {
        myList.value.push(item)
      }
    } else {
      myList.value.push(item)
    }
  })
}
const router = useRouter()
function onLogin() {
  router.push({ name: 'phoneLogin' })
}
function onCollect() {

}
function onCoupon() {

}
function onRecharge() {

}
const count = computed(() => {
  const { collectionNum, couponNum } = toRefs(userDetail.data)
  const collectStyle = collectionNum || store.user.token ? 'font-bold' : 'font-normal'
  const couponStyle = couponNum || store.user.token ? 'font-bold' : 'font-normal'
  const countCollectNUm = collectionNum ? collectionNum : store.user.token ? 0 : '-'
  const countCouponNum = couponNum ? couponNum : store.user.token ? 0 : '-'
  return { collectNUm: countCollectNUm, couponNum: countCouponNum, collectStyle, couponStyle }
})
const money = computed(() => {
  let value
  const style = userDetail.data.money || isNotEmpty(store.user.token) ? 'i-text-30' : 'i-text-18'
  if (store.user.token) {
    value = userDetail.data.money ? userDetail.data.money : '0.00'
  } else {
    value = '—'
  }
  return { value, style }
})
const myAvatar = computed(() => {
  return userDetail.data.avatar ? getImage(userDetail.data.avatar) : getImgPath(avatar.value)
})
</script>

<template>
  <div>
    <div class="my-title">
      <img class="my-avatar" :src="getImgPath(myAvatar)" />
      <div class="i-text-20 i-ml-11 font-medium" v-if="isNotEmpty(store.user.token)">
        {{ userDetail.data.name }}
      </div>
      <div v-else class="i-ml-10" @click="onLogin">
        <div class="font-bold i-text-20">登录/注册</div>
        <div class="text-gray-300 i-text-13">
          <text>即刻登录 发现更多精彩</text>
        </div>
      </div>
    </div>
    <div class="flex items-center i-my-10 i-mx-20 i-text-20 divide-x divide-gray-300">
      <div class="my-collection i-pr-20 " @click="onCollect">
        <div :class="count.collectStyle" class="text-black i-text-20 leading-none">
          {{ count.collectNUm }}
        </div>
        <div class="text-gray-300 i-text-14 ">收藏</div>
      </div>
      <div class="my-collection i-pl-20 " @click="onCoupon">
        <div v-if="userDetail.data.couponNum && Number(userDetail.data.couponNum) > 0"
          class=" my-bladge absolute  z-10 bg-red-500 i-px-3 i-py-1 ">可使用</div>
        <div :class="count.couponStyle" class="text-black i-text-20 leading-none">
          {{ count.couponNum }}
        </div>
        <div class="text-gray-300 i-text-14 ">优惠券</div>
      </div>
    </div>
    <div class="flex justify-center">
      <div class="my-card">
        <div class="my-money">
          <div class="i-text-14 text-center">账户余额（元）</div>
          <div class="font-bold i-mt-8 text-left" :class="money.style">{{ money.value }}</div>
        </div>
        <van-button class="i-mr-20" round :color="store.common.themeColorValue" size="small">选择技师</van-button>
      </div>
    </div>

    <van-cell-group inset class="i-mt-20">
      <van-cell is-link center v-for="item in myList" :title="item.text" :icon="getImgPath(item.icon)" />
    </van-cell-group>
    <div class="text-gray-300 i-text-14 text-center  leading-none  my-copyright">
      <div>{{ store.app.copyrightInfo }}</div>
      <div class="i-mt-5">Copyright©2022</div>
    </div>
  </div>
</template>
<style >
.van-cell__left-icon,
.van-cell__right-icon {
  height: 16px;
  width: 16px;
}

.my-title {
  padding: 30px 0 20px 10px;
  display: flex;
  align-items: center;
}

.my-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
}

.my-collection {
  @apply flex flex-col justify-center items-center relative;
}

.my-bladge {
  top: -10px;
  right: -30%;
  font-size: 10px;
  line-height: 1;
  border-radius: 20%;
}

.my-copyright {
  margin-top: 40px;
}

.my-card {
  background-image: url(@/assets/static/my/card.png);
  background-size: 100% 100%;
  width: 355px;
  height: 80px;
  @apply flex justify-between items-center;
}

.my-money {
  @apply flex-col flex justify-items-center text-white;
  transform: translate(30%, 0);
}

.collection-text,
coupon-text {
  width: 56px;
}
</style>
